import { defineComponent, onMounted, reactive, FunctionalComponent } from 'vue';

const FcNode: FunctionalComponent<{ data: number }> = ({ data }) => {
  return (
    <>
      <hr />
      <div>子组件-FunctionalComponent：
        {data < 10 ? <span>{data}</span> : <h1>{data}</h1>}
      </div>
    </>
  )
};

export default defineComponent({
  name: 'TsxTest',
  setup() {
    const data = reactive({ count: 0 });
 
    onMounted(() => {
      data.count = 5;
    });
 
    const clickHandler = () => data.count++;
 
    return () => (
      <>
        <span style={{ marginRight: '10px' }}>{ data.count }</span>
        <button onClick={clickHandler}>+</button>
        <FcNode data={data.count}/>
      </>
    )
  }
});